<template>
  <div class="container">
    <div class="card-top">
      <!-- 文字全局配音 -->
      <div class="horver-box">
        <a-row type="flex" justify="space-between" align="middle"
          style="height: 60px; font-size: 14px; margin: 0px 10px;  border-bottom: 1px solid #ebeef5; ">
          <a-col>
            <span style="margin-right: 10px">全局字幕配音</span>
            <span style="color: #4f66ff; background-color: #f3f7ff; padding: 0 5px">AI</span>
          </a-col>
          <a-col v-if="storeGlobalvideo && storeGlobalvideo.type == 0" @click="openSubtitDrawer"
            style="cursor: pointer">
            <span class="hover-effect" style="margin-right: 5px">添加</span><plus-outlined />
          </a-col>

          <!-- 已添加 -->
          <a-col @click="openSubtitDrawer" v-if="storeGlobalvideo && storeGlobalvideo.type == 1"
            style="position: relative; width: 145px" @mouseover="showCloseIcons = true"
            @mouseleave="showCloseIcons = false">
            <a-popover :autoAdjustOverflow="false" placement="bottom">
              <template #content>
                <p style=" width: 200px; 
                    overflow-wrap: break-word; 
                    display: -webkit-box; 
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 15;
                    overflow: hidden; ">
                  {{ storeGlobalvideo.text }}
                </p>
              </template>

              <div class="rg-sku hover-effect">
                <div class="rg-sku-left">
                  <cu-icon type="icon-quanjuzimupeiyin" style="
                color: #7794ca;
                font-size: 15px;
                height: 100%;
                margin-right: 3px;
              "></cu-icon>
                  <span class="rg-sku-Title">{{ storeGlobalvideo.text }}</span>
                </div>
                <EditOutlined style="margin-right: 3px" />
              </div>
              <span v-show="showCloseIcons" class="icon-bg" style="" @click.stop="DelglobalLabelVideo">
                <CloseOutlined style="font-size: 13px" />
              </span>
            </a-popover>
          </a-col>

        </a-row>
      </div>

      <!-- 全局文字标题 -->
      <div class="horver-box">
        <a-row type="flex" justify="space-between" align="middle"
          style="height: 60px; font-size: 14px; margin: 0px 10px; border-bottom: 1px solid #ebeef5">
          <a-col>
            <span style="margin-right: 10px">全局文字标题</span>
            <span style="color: #4f66ff; background-color: #f3f7ff; padding: 0 5px">AI</span>
          </a-col>
          <!-- 已添加 -->
          <a-col @click="openGlobalT" v-if="storeGlobalTitle && storeGlobalTitle.state == 1"
            style="position: relative; width: 145px" @mouseover="showCloseIcon = true"
            @mouseleave="showCloseIcon = false">
            <a-popover placement="bottom" :autoAdjustOverflow="false">
              <template #content>
                <p style=" width: 200px; 
                    overflow-wrap: break-word; 
                    display: -webkit-box; 
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 15;
                    overflow: hidden; ">
                  {{ storeGlobalTitle.data }}
                </p>
              </template>
              <div class="rg-sku hover-effect">
                <div class="rg-sku-left">
                  <cu-icon type="icon-quanjuwenzibiaoti" style="
                  color: #7794ca;
                  font-size: 15px;
                  height: 100%;
                  margin-right: 3px;
                "></cu-icon>
                  <span class="rg-sku-Title">{{ storeGlobalTitle.data }}</span>
                </div>
                <EditOutlined style="margin-right: 3px" />
              </div>
              <span v-show="showCloseIcon" class="icon-bg" style="" @click.stop="DelglobalLabel">
                <CloseOutlined style="font-size: 13px" />
              </span>

            </a-popover>

          </a-col>
          <a-col @click="openGlobalT" v-if="storeGlobalTitle && storeGlobalTitle.state == 0"
            style="cursor: pointer"><span class="hover-effect" style="margin-right: 5px">添加</span><plus-outlined />
          </a-col>
        </a-row>
      </div>


      <!-- 全局背景音乐 -->
      <div class="horver-box">
        <a-row type="flex" justify="space-between" align="middle"
          style="height: 60px; font-size: 14px; margin: 0px 10px; border-bottom: 1px solid #ebeef5">
          <a-col>
            <span>背景音乐</span>
          </a-col>
          <!-- 初始值 -->
          <a-col v-if="storeGlobalBGM && storeGlobalBGM.type == 0" @click="addMusiceHandle" style="cursor: pointer">
            <span>
              <span class="hover-effect" style="margin-right: 5px">添加</span>
              <plus-outlined />
            </span>
          </a-col>
          <!-- 自定义音乐 / 智能匹配 -->
          <a-col v-if="storeGlobalBGM && storeGlobalBGM.type !== 0" @click="addMusiceHandle"
            style="position: relative; width: 145px" @mouseover="showCloseIconBGM = true"
            @mouseleave="showCloseIconBGM = false">
            <div class="rg-sku hover-effect">
              <!-- 自定义音乐 -->
              <div v-show="storeGlobalBGM && storeGlobalBGM.type == 2" class="rg-sku-left">
                <cu-icon type="icon-beijingyinle" style="
                  color: #7a6eba;
                  font-size: 15px;
                  height: 100%;
                  margin-right: 3px;
                ">
                </cu-icon>
                <span class="rg-sku-Title_tran">自定义音乐({{ storeGlobalBGM.data }})</span>
              </div>
              <!-- 智能匹配 -->
              <div v-show="storeGlobalBGM && storeGlobalBGM.type == 1" class="rg-sku-left">
                <cu-icon type="icon-beijingyinle" style="
                  color: #7a6eba;
                  font-size: 15px;
                  height: 100%;
                  margin-right: 3px;
                ">
                </cu-icon>
                <span class="rg-sku-Title_tran">智能匹配音乐</span>
              </div>
              <EditOutlined style="margin-right: 3px" />
            </div>

            <!-- 删除 -->
            <span v-show="showCloseIconBGM" class="icon-bg" style="" @click.stop="DelglobalLabelBGM">
              <CloseOutlined style="font-size: 13px" />
            </span>
          </a-col>
        </a-row>
      </div>

      <!-- 全局转场设置 -->
      <div class="horver-box">
        <a-row type="flex" justify="space-between" align="middle"
          style="height: 60px; font-size: 14px;  margin: 0px 10px; border-bottom: 1px solid #ebeef5">
          <a-col>
            <span>转场设置</span>
          </a-col>

          <!-- 初始值 -->
          <a-col v-if="storeGlobalTran && storeGlobalTran.state == 0" @click="addTransitionHandle"
            style="cursor: pointer">
            <span>
              <span class="hover-effect" style="margin-right: 5px">添加</span>
              <plus-outlined />
            </span>
          </a-col>

          <!-- 自定义 / 智能匹配 -->
          <a-col v-if="storeGlobalTran && storeGlobalTran.state !== 0" @click="addTransitionHandle"
            style="position: relative; width: 145px" @mouseover="showCloseIconTran = true"
            @mouseleave="showCloseIconTran = false">
            <div class="rg-sku hover-effect">
              <!-- 自定义-->
              <div v-if="storeGlobalTran && storeGlobalTran.state == 2" class="rg-sku-left">
                <cu-icon type="icon-zhuanchangshezhi" style="
                  color: #7a6eba;
                  font-size: 16px;
                  height: 100%;
                  margin-right: 3px;
                "></cu-icon>

                <span class="rg-sku-Title_tran">自定义转场({{ storeGlobalTran.data }})</span>
              </div>
              <!-- 智能匹配 -->
              <div v-if="storeGlobalTran && storeGlobalTran.state == 1" style="display: flex; align-items: center">
                <cu-icon type="icon-zhuanchangshezhi" style="
                  color: #7a6eba;
                  font-size: 15px;
                  height: 100%;
                  margin-right: 3px;
                "></cu-icon>
                <span>智能匹配转场</span>
              </div>
              <EditOutlined style="margin-right: 3px" />
            </div>

            <!-- 删除 -->
            <span v-show="storeGlobalTran &&
              showCloseIconTran &&
              showCloseIconTran.state !== 0
              " class="icon-bg" style="" @click.stop="DelglobalLabelTran">
              <CloseOutlined style="font-size: 13px" />
            </span>
          </a-col>
        </a-row>
      </div>

      <!-- 全局过滤设置 -->
      <div class="horver-box">
        <a-row type="flex" justify="space-between" align="middle"
          style="height: 60px; font-size: 14px;  margin: 0px 10px; border-bottom: 1px solid #ebeef5">
          <a-col>
            <span>滤镜设置</span>
          </a-col>
          <!-- 初始值 -->
          <a-col v-if="storeGlobalFilter && storeGlobalFilter.state == 0" @click="addFilterCgHandle"
            style="cursor: pointer">
            <span>
              <span class="hover-effect" style="margin-right: 5px">添加</span>
              <plus-outlined />
            </span>
          </a-col>

          <!-- 自定义 / 智能匹配 -->
          <a-col v-if="storeGlobalFilter && storeGlobalFilter.state !== 0" @click="addFilterCgHandle"
            style="position: relative; width: 145px" @mouseover="showCloseIconFilter = true"
            @mouseleave="showCloseIconFilter = false">
            <div class="rg-sku hover-effect">
              <!-- 自定义-->
              <div v-if="storeGlobalFilter && storeGlobalFilter.state == 2" class="rg-sku-left">
                <cu-icon type="icon-lvjingshezhi" style="
                  color: #7a6eba;
                  font-size: 16px;
                  height: 100%;
                  margin-right: 3px;
                "></cu-icon>
                <span class="rg-sku-Title_tran">自定义滤镜({{ storeGlobalFilter.data }})</span>
              </div>
              <!-- 智能匹配 -->
              <div v-if="storeGlobalFilter && storeGlobalFilter.state == 1" style="display: flex; align-items: center">
                <cu-icon type="icon-lvjingshezhi" style="
                  color: #7a6eba;
                  font-size: 22px;
                  height: 100%;
                  margin-right: 3px;
                "></cu-icon>
                <span>智能匹配滤镜</span>
              </div>

              <EditOutlined style="margin-right: 3px" />
            </div>

            <!-- 删除 -->
            <span v-show="showCloseIconFilter &&
              storeGlobalFilter &&
              storeGlobalFilter.state !== 0
              " class="icon-bg" style="" @click.stop="DelglobalLabelFilter">
              <CloseOutlined style="font-size: 13px" />
            </span>
          </a-col>
        </a-row>
      </div>

      <!-- 背景设置 -->
      <div class="horver-box">
        <a-row type="flex" justify="space-between" align="middle"
          style="height: 60px; font-size: 14px; margin: 0 10px; border-bottom: 1px solid #ebeef5">
          <a-col>
            <span style="margin-right: 10px">背景设置</span>
          </a-col>

          <!-- 初始值 -->
          <a-col v-if="storeGlobalBackground && storeGlobalBackground.state == 0" @click="addBgColorHandle"
            style="cursor: pointer">
            <span>
              <span class="hover-effect" style="margin-right: 5px">添加</span>
              <plus-outlined />
            </span>
          </a-col>

          <!-- 已添加 -->
          <a-col v-if="storeGlobalBackground && storeGlobalBackground.state !== 0" @click="addBgColorHandle"
            style="position: relative; width: 145px" @mouseover="showCloseIconBg = true"
            @mouseleave="showCloseIconBg = false">
            <div class="rg-sku hover-effect">
              <!-- 自定义图片-->
              <div class="rg-sku-left">
                <!-- 固定颜色-->
                <div v-if="storeGlobalBackground.state == 1" class="rg-sku hover-effect"
                  style="border: none !important">
                  <div class="rg-sku-left">
                    <span class="cube" style="border-radius: 0.125rem"
                      :style="{ backgroundColor: storeGlobalBackground.data }"></span><span
                      class="rg-sku-Title_tran">固定颜色</span>
                  </div>
                </div>
                <!-- 自定义图片-->
                <div v-if="storeGlobalBackground.state == 2" class="rg-sku hover-effect">
                  <div class="rg-sku-left">
                    <!-- <span class="cube" style="border-radius: 0.125rem" :style="{
                      backgroundImage:
                        'url(\'' + storeGlobalBackground.data + '\')',
                      backgroundSize: 'cover',
                    }"></span> -->
                    <span class="rg-sku-Title_tran">自定义背景({{ storeGlobalBackground.len }})</span>
                  </div>
                </div>
              </div>
              <EditOutlined style="margin-right: 3px" />
            </div>
            <!-- 删除 -->
            <span v-show="showCloseIconBg &&
              storeGlobalBackground &&
              storeGlobalBackground.type !== 0
              " class="icon-bg" style="" @click.stop="DelglobalLabelBg">
              <CloseOutlined style="font-size: 13px" />
            </span>
          </a-col>
        </a-row>
      </div>

      <!-- 视频封面 -->
      <div class="horver-box">
        <a-row type="flex" justify="space-between" align="middle" style="height: 60px; margin: 0 10px; font-size: 14px">
          <a-col>
            <span style="margin-right: 10px">视频封面</span>
          </a-col>

          <!-- 初始值 -->
          <a-col v-if="storeGlobalVideoBg && storeGlobalVideoBg.state == 0" @click="addVideoHandle"
            style="cursor: pointer">
            <span>
              <span class="hover-effect" style="margin-right: 5px">添加</span>
              <plus-outlined />
            </span>
          </a-col>

          <!-- 已添加 -->
          <a-col v-if="storeGlobalVideoBg && storeGlobalVideoBg.state !== 0" @click="addVideoHandle"
            style="position: relative; width: 145px" @mouseover="showCloseIconVideoBg = true"
            @mouseleave="showCloseIconVideoBg = false">
            <div class="rg-sku hover-effect">
              <!-- 自定义-->
              <div class="rg-sku-left" v-if="storeGlobalVideoBg && storeGlobalVideoBg.state == 2">
                <span class="cube" :style="{
                  backgroundImage: 'url(\'' + storeGlobalVideoBg.data + '\')',
                  backgroundSize: 'cover',
                }"></span><span class="rg-sku-Title_tran">自定义封面</span>
              </div>
              <!-- 智能匹配 -->
              <div v-if="storeGlobalVideoBg && storeGlobalVideoBg.state == 1"
                style="display: flex; align-items: center; padding-left: 5px">
                <cu-icon type="icon-shipinfengmian" style="
                  color: #73bf86;
                  font-size: 18px;
                  height: 100%;
                  margin-right: 3px;
                "></cu-icon>
                智能生成封面
              </div>
              <EditOutlined style="margin-right: 3px" />
            </div>

            <span v-show="showCloseIconVideoBg &&
              storeGlobalVideoBg &&
              storeGlobalVideoBg.state !== 0
              " class="icon-bg" style="" @click.stop="DelglobalLabelVideoBg">
              <CloseOutlined style="font-size: 13px" />
            </span>
          </a-col>
        </a-row>

      </div>


    </div>
    <div class="card-bottom">
      <a-row type="flex" justify="space-between" align="middle" style="height: 50px; font-size: 14px">
        <a-col>
          <span style="margin-right: 10px">选择比例</span>
        </a-col>
        <a-col>
          <div class="rg-sku hover-effect">
            <span class="proportion" v-for="item in proportionList" :key="item.key"
              @click="checkProportionHandle(item.key)" :class="{ active: proportion === item.key }">{{ item.label
              }}</span>
          </div>
        </a-col>
      </a-row>
      <a-row type="flex" justify="space-between" align="middle" style="height: 50px; font-size: 14px">
        <a-col>
          <span style="margin-right: 10px">视频分辨率</span>
        </a-col>
        <a-col v-if="proportion !== 3">
          <div class="rg-sku hover-effect">
            <span class="resolution" :class="{ active: activeResolution === 0 }" @click="setActiveResolution(0)">{{
              resolutionList[0] }}</span>
            <span class="resolution" :class="{ active: activeResolution === 1 }"
              :style="resolutionList[1] === '720x720' ? 'margin-right: 27px;' : '20px'"
              @click="setActiveResolution(1)">{{
                resolutionList[1] }}</span>
          </div>
        </a-col>
        <a-col v-else>
          <a-space>
            <div class="rg-sku hover-effect">
              <a-input-number size="small" style="width: 94px;" prefix="W" bordered="false" v-model:value="width"
                :max="1920" :min="360" />
              <a-input-number style="width: 94px;" :max="1920" :min="360" v-model:value="height" size="small"
                prefix="H" />
            </div>
          </a-space>
        </a-col>
      </a-row>
    </div>
  </div>

  <GlobalConfigBgMusic ref="globalConfigBgMusic" />
  <GlobalConfigTransSet ref="globalConfigTransSet" />
  <GlobalConfigFilterCg ref="globalConfigFilterCg" />
  <GlobalConfigBgColorSet ref="globalConfigBgColorSet" />
  <GlobalConfigVideoCover ref="globalConfigVideoCover" />
</template>

<script>
import {
  defineComponent,
  reactive,
  toRefs,
  computed,
  nextTick,
  watch,
  defineEmits,
  onMounted,
  ref,
  createVNode,
} from "vue";
import {
  DeleteOutlined,
  CheckCircleOutlined,
  LeftOutlined,
  EditOutlined,
  ExclamationCircleOutlined,
  PicCenterOutlined,
  UploadOutlined,
  DownloadOutlined,
  PlusOutlined,
  CloseOutlined,
} from "@ant-design/icons-vue";
import { useRouter } from "vue-router";
import GlobalConfigBgMusic from "./GlobalConfigBgMusic.vue";
import GlobalConfigTransSet from "./GlobalConfigTransSet.vue";
import GlobalConfigFilterCg from "./GlobalConfigFilterCg.vue";
import GlobalConfigBgColorSet from "./GlobalConfigBgColorSet.vue";
import GlobalConfigVideoCover from "./GlobalConfigVideoCover.vue";
import { message } from "ant-design-vue";
import { Modal } from "ant-design-vue";
import {
  calculateNewPosition,
  calculateDraggableArea,
} from "../../utools/index.js";
// 仓库
import { useStore } from "vuex";
import { set } from "lodash";
import { type } from "jquery";
export default defineComponent({
  name: "mixedCutCreat",
  components: {
    CheckCircleOutlined,
    LeftOutlined,
    EditOutlined,
    PicCenterOutlined,
    UploadOutlined,
    ExclamationCircleOutlined,
    DeleteOutlined,
    DownloadOutlined,
    PlusOutlined,
    CloseOutlined,
    GlobalConfigBgMusic,
    GlobalConfigTransSet,
    GlobalConfigFilterCg,
    GlobalConfigBgColorSet,
    GlobalConfigVideoCover,
  },
  props: {
    globalLabel: {
      type: String,
      default: "",
    },
  },

  setup(props, context) {
    const router = useRouter();
    const store = useStore();
    // 仓库中的混剪数据
    const VideoMashup = computed(() => {
      return store.state.shotstack.VideoMashup;
    });

    const currentIndex = computed(() => {
      return store.state.shotstack.currentIndex;
    });
    // 从仓库中拿到全局文字标题数据
    const storeGlobalTitle = computed(() => {
      if (store.state.shotstack.VideoMashup.global_text_config) {
        let state = "";
        let data = "";
        store.state.shotstack.VideoMashup.global_text_config.configs.forEach(ele => {
          ele.forEach(item => {
            item.text && (data += item.text)
          })
        })
        state = store.state.shotstack.VideoMashup.global_text_config.type;
        return {
          state,
          data,
        };
      }
    });

    // 从仓库中拿到全局文字标题数据
    const storeGlobalTitleState = computed(() => {
      return store.state.shotstack.VideoMashup.global_text_config.type;
    });

    // 从仓库中拿到全局字幕配音
    const storeGlobalvideo = computed(() => {
      if (
        store.state.shotstack.VideoMashup.global_tts_config &&
        store.state.shotstack.VideoMashup.global_tts_config.configs_type ==
        "text"
      ) {
        const textConfigs = store.state.shotstack.VideoMashup.global_tts_config.configs.filter(ele => ele.tab_id == "text")
        if (
          textConfigs
            .length > 0
        ) {
          const index =
            textConfigs.findIndex(
              (ele) => {
                return ele.subtitle.some(
                  (i) => !!i.text.trim() && i.text.trim() !== "\n"
                );
              }
            );
          let text = "";
          let atherNum = "";
          let type = store.state.shotstack.VideoMashup.global_tts_config.type;
          if (index !== -1) {
            text =
              textConfigs[0].subtitle
                .map((ele) => ele.text)
                .join("");
            atherNum =
              textConfigs[0].subtitle.length;
          }
          return {
            text: text,
            atherNum,
            type,
          };
        }
      }
      if (
        store.state.shotstack.VideoMashup.global_tts_config &&
        store.state.shotstack.VideoMashup.global_tts_config.configs_type ==
        "audio"
      ) {
        const textConfigs = store.state.shotstack.VideoMashup.global_tts_config.configs.filter(ele => ele.tab_id == "audio")
        if (
          textConfigs
            .length > 0
        ) {
          const index =
            textConfigs.findIndex(
              (ele) => {
                return ele.subtitle.some(
                  (i) => !!i.text.trim() && i.text.trim() !== "\n"
                );
              }
            );
          let text = "";
          let atherNum = "";
          let type = store.state.shotstack.VideoMashup.global_tts_config.type;
          if (index !== -1) {
            text =
              textConfigs[0].subtitle
                .map((ele) => ele.text)
                .join("");
            atherNum =
              textConfigs[0].subtitle.length;
          }
          return {
            text: text,
            atherNum,
            type,
          };
        }
      }
    });

    // 从仓库中拿到全局转场
    const storeGlobalTran = computed(() => {
      if (store.state.shotstack.VideoMashup.transition_config) {
        let state = "";
        let data = "";
        data =
          store.state.shotstack.VideoMashup.transition_config.transitions
            ?.length;
        state = store.state.shotstack.VideoMashup.transition_config.type;
        return {
          state,
          data,
        };
      }
    });

    // 从仓库中拿到全局滤镜
    const storeGlobalFilter = computed(() => {
      if (store.state.shotstack.VideoMashup.filter_config) {
        let state = "";
        let data = "";
        data = store.state.shotstack.VideoMashup.filter_config.filters?.length;
        state = store.state.shotstack.VideoMashup.filter_config.type;
        return {
          state,
          data,
        };
      }
    });

    // 从仓库中拿到全局背景色
    const storeGlobalBackground = computed(() => {
      if (
        store.state.shotstack.VideoMashup.background &&
        store.state.shotstack.VideoMashup.background.type == 0
      ) {
        let state = "";
        state = store.state.shotstack.VideoMashup.background.type;
        return {
          state,
        };
      }

      if (
        store.state.shotstack.VideoMashup.background &&
        store.state.shotstack.VideoMashup.background.type == 1
      ) {
        let state = "";
        let data = "";
        data = store.state.shotstack.VideoMashup.background.rgba;
        state = store.state.shotstack.VideoMashup.background.type;
        return {
          state,
          data,
        };
      }
      if (
        store.state.shotstack.VideoMashup.background &&
        store.state.shotstack.VideoMashup.background.type == 2
      ) {
        let state = "";
        let data = "";
        let len = "";
        data = store.state.shotstack.VideoMashup.background.material_urls[0];
        len = store.state.shotstack.VideoMashup.background.material_urls.length;
        state = store.state.shotstack.VideoMashup.background.type;
        return {
          state,
          data,
          len,
        };
      }
    });

    // 从仓库中拿到全局视频封面
    const storeGlobalVideoBg = computed(() => {
      if (store.state.shotstack.VideoMashup.cover_config) {
        let state = "";
        let data = "";
        data = store.state.shotstack.VideoMashup.cover_config.material_urls[0];
        state = store.state.shotstack.VideoMashup.cover_config.type;
        return {
          state,
          data,
        };
      }
    });

    // 从仓库中拿到全局配乐
    const storeGlobalBGM = computed(() => {
      if (store.state.shotstack.VideoMashup.bgm_config) {
        let type = store.state.shotstack.VideoMashup.bgm_config?.type;
        let data =
          store.state.shotstack.VideoMashup.bgm_config?.bgm_list.length;
        return {
          type,
          data,
        };
      }
    });

    const state = reactive({
      globalConfigBgMusic: null,
      globalConfigTransSet: null,
      globalConfigFilterCg: null,
      globalConfigBgColorSet: null,
      globalConfigVideoCover: null,
      showCloseIcon: false,
      showCloseIcons: false,
      showCloseIconTran: false,
      showCloseIconBGM: false,
      showCloseIconFilter: false,
      showCloseIconBg: false,
      showCloseIconVideoBg: false,
      proportionList: [
        {
          id: 1,
          label: "9:16",
          key: 0,
        },
        {
          id: 2,
          label: "16:9",
          key: 1,
        },
        {
          id: 3,
          label: "1:1",
          key: 2,
        },
        {
          id: 4,
          label: "自定义",
          key: 3,
        },
      ],
      // resolutionList: ["1080x1920", "720x1280"],
      miniResolution: 1080, //最小分辨率
      maxResolution: 1920, //最大分辨率
    });

    // 当前选择的视频宽
    const width = computed({
      get() {
        return VideoMashup.value.width;
      },
      set(val) {
        if (val < 360) {
          val = 360;
        } else if (val > 1920) {
          val = 1920;
        }
        // 判断用户是想增加还是减少
        if (val % 4 !== 0) {
          if (val > this.value) {
            // 用户意图增加，向上取最近的4的整数倍
            val += 4 - (val % 4);
          } else {
            // 用户意图减少，向下取最近的4的整数倍
            val -= val % 4;
          }
        }
        resetXandY(val, height.value)
      },
    });
    const height = computed({
      get() {
        return VideoMashup.value.height;
      },
      set(val) {
        console.log(this.value);
        // debugger
        if (val < 360) {
          val = 360;
        } else if (val > 1920) {
          val = 1920;
        }
        // 判断用户是想增加还是减少
        if (val % 4 !== 0) {
          if (val > this.value) {
            // 用户意图增加，向上取最近的4的整数倍
            val += 4 - (val % 4);
          } else {
            // 用户意图减少，向下取最近的4的整数倍
            val -= val % 4;
          }
        }
        resetXandY(width.value, val)
      },
    });

    // 当前选择的比例
    const proportion = computed({
      get() {
        return VideoMashup.value.proportion;
      },
      set(val) {
        store.dispatch("SetVideoMashupItem", {
          key: "proportion",
          value: val,
        });
        nextTick(() => {
          activeResolution.value = 0;
        });
      },
    });
    // 获取当前视频的分辨率选项
    const resolutionList = computed({
      get() {
        let arr = [];
        switch (proportion.value) {
          case 0:
            arr = ["1080x1920", "720x1280"];
            break;
          case 1:
            arr = ["1920x1080", "1280x720"];
            break;
          case 2:
            arr = ["1080x1080", "720x720"];
            break;
        }
        return arr;
      },
    });

    // 当前选择的视频宽高
    const activeResolution = computed({
      get() {
        // 和后端的渲染比例保持一致
        let index = resolutionList.value.findIndex((item) => {
          return item == (width.value) + "x" + (height.value);
        });
        return index;
      },
      set(val) {
        // 旧的宽高比
        const oldSizeData = calculateDraggableArea(
          VideoMashup.value.showWidth,
          VideoMashup.value.showHeight
        );
        proportion.value < 3
          ? (() => {
            let target = resolutionList.value[val];
            console.log(target, "选择的分辨率");
            let match = target.match(/^(\d+)x(\d+)$/);
            resetXandY(match[1], match[2])
          })()
          : (() => {
            resetXandY(width.value, height.value)
          })();
      },
    });

    // 重新计算新的坐标
    const resetXandY = (w, h) => {
      // 旧的宽高比
      const oldSizeData = calculateDraggableArea(
        VideoMashup.value.showWidth,
        VideoMashup.value.showHeight
      );
      store.commit("SET_VIDEOMASHUP_ITEM", {
        key: "width",
        value: w,
      });
      store.commit("SET_VIDEOMASHUP_ITEM", {
        key: "showWidth",
        value: w / 4,
      });
      store.commit("SET_VIDEOMASHUP_ITEM", {
        key: "height",
        value: h,
      });
      store.commit("SET_VIDEOMASHUP_ITEM", {
        key: "showHeight",
        value: h / 4,
      });

      // 新的宽高比例
      const sizeData = calculateDraggableArea(
        VideoMashup.value.showWidth,
        VideoMashup.value.showHeight
      );
      // 遍历 修改文本标题 和文字标题的坐标比例
      VideoMashup.value.global_tts_config.configs.forEach((ele) => {
        ele.subtitle.forEach((item) => {
          // 新的文本位置
          const newPosition = calculateNewPosition(
            item.x,
            item.y,
            oldSizeData,
            sizeData
          );
          item.x = newPosition.newPositionX;
          item.y = newPosition.newPositionY;
        });
      });
      VideoMashup.value.global_text_config.configs.forEach((item) => {
        // 新的文本位置
        const newPosition = calculateNewPosition(
          item.x,
          item.y,
          oldSizeData,
          sizeData
        );
        item.x = newPosition.newPositionX;
        item.y = newPosition.newPositionY;
      });
      VideoMashup.value.resource_data.forEach((element) => {
        element.tts_config.forEach((ele) => {
          ele.subtitle.forEach((i) => {
            // 新的文本位置
            const newPosition = calculateNewPosition(
              i.x,
              i.y,
              oldSizeData,
              sizeData
            );
            i.x = newPosition.newPositionX;
            i.y = newPosition.newPositionY;
          });
        });
        element.text_config.forEach((ele) => {
          const newPosition = calculateNewPosition(
            ele.x,
            ele.y,
            oldSizeData,
            sizeData
          );
          ele.x = newPosition.newPositionX;
          ele.y = newPosition.newPositionY;
        });
      });
      store.commit("SET_VIDEOMASHUP_ITEM", {
        key: "resource_data",
        value: VideoMashup.value.resource_data,
      });
    }

    // 音乐设置
    const addMusiceHandle = () => {
      state.globalConfigBgMusic.showDrawer();
    };
    // 转场设置
    const addTransitionHandle = () => {
      state.globalConfigTransSet.showDrawer();
    };
    // 滤镜设置
    const addFilterCgHandle = () => {
      state.globalConfigFilterCg.showDrawer();
    };
    // 背景颜色设置
    const addBgColorHandle = () => {
      state.globalConfigBgColorSet.showDrawer();
    };
    // 视频封面设置
    const addVideoHandle = () => {
      state.globalConfigVideoCover.showDrawer();
    };
    // 修改比例
    const checkProportionHandle = (key) => {
      proportion.value = key;
    };
    // 修改选择的分辨率
    const setActiveResolution = (index) => {
      activeResolution.value = index;
    };


    // 通知父组件打开全局文字标题抽屉
    const openGlobalT = () => {

      let isOpenHint = VideoMashup.value.resource_data.some((item) => {
        return item.text_config.some((ele) => {
          return !!ele.text
        });
      });
      // 没有开启全局 并且视频组中已经有文本了
      if (storeGlobalTitle.value.state !== 1 && isOpenHint) {
        Modal.confirm({
          title: "开启确认",
          cancelText: "取消",
          okText: "确认",
          icon: createVNode(ExclamationCircleOutlined),
          content:
            "已在部分镜头设置了文字，是否取消并使用全局文字，取消后，已设置「时长设置」=「随音频，视频自动变速」或「随音频，视频智能截取」的镜头组将变为「视频原始时长」",
          onOk() {
            context.emit("openGlobalT");
          },
          onCancel() { },
        });
      } else {
        context.emit("openGlobalT");
      }
    };

    //
    const openSubtitDrawer = () => {
      /**
       * 是否有某个有文本
       *  @data true 需要提示  false  无需提示
       */

      let isOpenHint = VideoMashup.value.resource_data.some((item) => {
        return item.tts_config.some((ele) => {
          return ele.subtitle.some((i) => {
            return !!i.text;
          });
        });
      });

      if (isOpenHint && storeGlobalvideo.value.type !== 1) {
        // 暂时注释 增加判断
        Modal.confirm({
          title: "开启确认",
          icon: createVNode(ExclamationCircleOutlined),
          cancelText: "取消",
          okText: "确认",
          content:
            "已在部分镜头设置了文字，是否取消并使用全局文字，取消后，已设置「时长设置」=「随音频，视频自动变速」或「随音频，视频智能截取」的镜头组将变为「视频原始时长」",
          onOk() {
            context.emit("openGlobalSubtitledubbingDrawer", 1111);
          },
          onCancel() { },
        });
      } else {
        context.emit("openGlobalSubtitledubbingDrawer", 1111);
      }
      return;
    };

    // 删除全局 文字样式 清空
    const DelglobalLabel = () => {
      props.globalLabel = "";
      globalTitleState.value = false;
      store.commit("SET_GENERATE_GLOBALTITLE", {
        key: "global_text_config",
        value: 0,
      });
    };

    // 删除全局字幕配音   清空
    const DelglobalLabelVideo = () => {
      store.commit("SET_GENERATE_GLOBALVIDEO", {
        key: "global_tts_config",
        value: 0,
      });
    };

    // 删除全局 转场设置
    const DelglobalLabelTran = () => {
      console.log("点击了1111111");
      store.commit("SET_GENERATE_GLOBALTran", {
        key: "transition_config",
        value: 0,
      });
    };

    // 删除全局 滤镜设置
    const DelglobalLabelFilter = () => {
      console.log("点击了1111111");

      store.commit("SET_GENERATE_GLOBALFilter", {
        key: "filter_config",
        value: 0,
      });
    };

    // 删除全局 背景色设置
    const DelglobalLabelBg = () => {
      store.commit("SET_GENERATE_GLOBALBg", {
        key: "background",
        value: 0,
      });
    };
    // 删除全局 视频封面设置
    const DelglobalLabelVideoBg = () => {
      store.commit("SET_GENERATE_GLOBALVideoBg", {
        key: "cover_config",
        value: 0,
      });
    };

    // 删除全局 配乐设置
    const DelglobalLabelBGM = () => {
      store.commit("SET_GENERATE_GLOBALBGM", {
        key: "bgm_config",
        value: 0,
      });
    };

    const globalTitleState = ref(false);
    watch(
      () => props.globalLabel,
      (val) => {
        if (val.length > 0) {
          globalTitleState.value = true;
        }
      }
    );

    const storeGlobalTitles = ref("");
    // watch(
    //   () => storeGlobalTitle.value,
    //   (val) => {
    //     if (val && val !== undefined) {
    //       storeGlobalTitles.value = val;
    //       globalTitleState.value = true;
    //     }
    //   },
    //   { immediate: true, deep: true }
    // );

    onMounted(() => { });
    return {
      ...toRefs(state),
      addMusiceHandle,
      addTransitionHandle,
      addFilterCgHandle,
      addBgColorHandle,
      addVideoHandle,
      checkProportionHandle,
      setActiveResolution,
      DelglobalLabelVideo,
      openSubtitDrawer,
      openGlobalT,
      DelglobalLabel,
      DelglobalLabelTran,
      DelglobalLabelBGM,
      DelglobalLabelFilter,
      DelglobalLabelBg,
      DelglobalLabelVideoBg,
      storeGlobalVideoBg,
      storeGlobalBackground,
      storeGlobalFilter,
      storeGlobalBGM,
      VideoMashup,
      activeResolution,
      proportion,
      width,
      resolutionList,
      height,
      globalTitleState,
      storeGlobalTitle,
      storeGlobalTitles,
      storeGlobalvideo,
      storeGlobalTitleState,
      storeGlobalTran,
      storeGlobalTitle,
    };
  },
});
</script>

<style lang="less" scoped>
.card-top {
  font-size: 10px;
  color: #737a87;
  // padding: 10px 10px;
  border: 1px solid #f3f3f3;
}

.horver-box:hover {
  background-color: #f9fafb;
}

.cube {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: #000;
  margin-right: 5px;
}

.rg-sku {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 35px;
  border: 1px solid #f3f3f3;
  background: linear-gradient(133deg, #f6f8fa, rgba(246, 248, 250, 0.3));
  border-radius: 2px;
  padding: 5px;

  .rg-sku-left {
    display: flex;
    // margin-right: 30px;
    justify-content: space-between;
    align-items: center;
  }
}

.card-bottom {
  margin-top: 10px;
}

.proportion {
  margin-right: 20px;
  text-align: center;
}

.proportion:last-child {
  margin-right: 0px;
}

.resolution {
  margin-right: 25px;
  text-align: center;
}

.resolution:last-child {
  margin-right: 20px;
  text-align: center;
}

.active {
  background: #fff;
  color: #2878FF;
  text-align: center;
  padding: 2px 5px;
  border-radius: 5px;
  border: 1px solid #d7dbdf;
}

.hover-effect {
  cursor: pointer;
}

.rg-sku-Title {
  width: 90px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.rg-sku-Title_tran {
  width: 90px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.icon-bg {
  position: absolute;
  top: -11px;
  left: 133px;
  z-index: 999;
  background-color: #fff;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25),
    inset 0 1px 2px rgba(0, 0, 0, 0.15);
}
</style>
